<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="favicon.ico" />
    <title>Named Routes and Named Views demo</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@2.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <div id="app">
      A
      <router-link to="/">To Home</router-link>
      <router-link :to="{path:'/user/11?q=1uery'}">To User(Routes)</router-link>
      <router-link :to="{name:'user',params:{userId:22},query:{q:'query'}}"
        >To User(Named Routes)</router-link
      >
      <!-- named views -->
      <router-link to="/namedViews">To Named Views demo component</router-link>
      <button @click="pushTo">To User(Named Routes)</button>
      <router-view></router-view>
    </div>
    <script type="text/javascript">
      const template = `
                  <div>
                    name:{{$route.name}}<br />
                    path:{{$route.path}}
                    <div>query:{{$route.query}}</div>
                    <div>params:{{$route.params}}</div>
                  </div>`;
      const Home = {
        template: template,
      };
      const User = {
        template: template,
      };
      const NamedViews = {
        template: `
        <div>
          <h1>Named Views</h1>
          <NavBar />
          <router-view />
          <router-view name="sub" />
        </div>
        `,
      };
      const NamedViewsChild1 = {
        template: "<div>Child1</div>",
      };
      const NamedViewsChild2 = {
        template: "<div>Child2</div>",
      };
      const NamedViewsChild3 = {
        template: "<div>Child3</div>",
      };
      const router = new VueRouter({
        routes: [
          {
            path: "/",
            name: "home",
            component: Home,
          },
          {
            path: "/user/:userId",
            name: "user",
            component: User,
          },
          ,
          {
            path: "/namedViews",
            component: NamedViews,
            children: [
              {
                path: "single",
                component: NamedViewsChild1,
              },
              {
                path: "sub",
                components: {
                  default: NamedViewsChild2,
                  sub: NamedViewsChild3,
                },
              },
            ],
          },
        ],
      });
      Vue.component("NavBar", {
        template: `<div><router-link to="/">To Home</router-link>
          <router-link to="/namedViews/single">To Named Views single</router-link>
          <router-link to="/namedViews/sub">To Named Views Sub</router-link></div>`,
      });
      const app = new Vue({
        router,
        methods: {
          pushTo() {
            this.$router.push({
              name: "user",
              query: {
                q: "query",
              },
              params: {
                userId: 33,
              },
            });
          },
        },
      }).$mount("#app");
    </script>
  </body>
</html>
